<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import TnAvatar from '@tuniao/tnui-vue3-uniapp/components/avatar/src/avatar.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnTag from '@tuniao/tnui-vue3-uniapp/components/tag/src/tag.vue'
import TnPhotoAlbum from '@tuniao/tnui-vue3-uniapp/components/photo-album/src/photo-album.vue'
import TnLazyLoad from '@tuniao/tnui-vue3-uniapp/components/lazy-load/src/lazy-load.vue'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import TnFooter from '@tuniao/tnui-vue3-uniapp/components/footer/src/footer.vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue'
import TnSticky from '@tuniao/tnui-vue3-uniapp/components/sticky/src/sticky.vue'
import { useUniAppSystemRectInfo } from '@tuniao/tnui-vue3-uniapp/hooks'
import { onShow } from '@dcloudio/uni-app'
import { useSubPageProvide } from './composables'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import type { IndexPageOnLoadFunc, IndexPageOnScrollFunc } from '@/types'
import PageContainer from '@/components/page-container/index.vue'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import { useScrollTransparentNavbar } from '@/hooks'
import user from '@/api/user.js'
import circlesPost from '@/api/circlesPost.js'
import { FILE_URL, SYSTEM_CONFIG, USER_INFO, USER_TOKEN } from '@/api/config'

const paging = ref(null)
useZPaging(paging)
const instance = getCurrentInstance()
const { navBarInfo } = useUniAppSystemRectInfo()
const {
  triggerElementId,
  navbarOpacity,
  init: initTransparentScroll,
  updateTargetTriggerValue,
  opacityScrollHandle,
} = useScrollTransparentNavbar(instance)

const state = reactive({
  showPopup: false,
  currentTabIndex: 0,
  tabsData: ['相册', '动态', '赞/喜欢', '私密'],
  systemConfig: {},
  userToken: '',
  userInfo: {
    username: '',
    nickname: '',
    introduce: '',
    avatar: '',
    personal_bg: '',
    birthday: '',
    age: '',
    gender: '',
    gender_text: '',
    labels: [],
    label_ids: '',
    ip_territory: '未知',
    id_number: '',
    register_date: '',
    circles_total: 0,
    visitor_total: 0,
    fans_total: 0,
    follow_total: 0,
    dynamic_total: 0,
    grade_icon: '',
  },
  scope: 'all_see,fans_see',
  circlesPostLists: [],
  userAgreement: '',
  privacyPolicy: '',
  communityCovenants: '',
})

const jumpMap = (
  longitude: any,
  latitude: any,
  location: any,
  poiaddress: any
) => {
  tnNavPage(
    `/pagesA/location?longitude=${longitude}&latitude=${latitude}&location=${location}&poiaddress=${poiaddress}`
  )
}

const navEditUserInfo = () => {
  if (state.userToken == '') {
    tnNavPage('/pages/login/login')
    return
  }
  tnNavPage('/minePages/userinfo')
}
const clickLeftMenu = () => {
  if (state.userToken == '') {
    tnNavPage('/pages/login/login')
    return
  }
  state.showPopup = true
}
const navAddTag = () => {
  if (state.userToken == '') {
    tnNavPage('/pages/login/login')
    return
  }
  tnNavPage(`/minePages/labels?labelIds=${state.userInfo.label_ids}`)
}
const navVip = () => {
  state.showPopup = false
  tnNavPage('/pagesA/vip')
}
const navSignin = () => {
  state.showPopup = false
  tnNavPage('/pagesA/signin')
}
const navMineCircles = () => {
  state.showPopup = false
  tnNavPage('/minePages/circleslist')
}
const navMineCirclesFootprint = () => {
  state.showPopup = false
  tnNavPage('/minePages/circlesfootprint')
}
const navMineFans = () => {
  state.showPopup = false
  tnNavPage('/minePages/fans')
}
const navMineFollow = () => {
  state.showPopup = false
  tnNavPage('/minePages/follow')
}
const navMineVisitor = () => {
  state.showPopup = false
  tnNavPage('/minePages/visitor')
}
const navMineReply = () => {
  state.showPopup = false
  tnNavPage('/minePages/reply')
}
const navMineOrganizeBureau = () => {
  state.showPopup = false
  tnNavPage('/minePages/organizebureau')
}

// eslint-disable-next-line camelcase
const navTopicDetailPage = (topic_name: string) => {
  tnNavPage(
    // eslint-disable-next-line camelcase
    `/circlesPages/topic/detail?topicName=${topic_name}`
  )
}

const navCommunityCovenants = () => {
  state.showPopup = false
  tnNavPage(state.communityCovenants)
}
const navAboutUs = () => {
  state.showPopup = false
  tnNavPage('/pagesA/aboutus')
}

const navSet = () => {
  state.showPopup = false
  tnNavPage('/pagesA/set')
}
const navHelp = () => {
  state.showPopup = false
  tnNavPage('/pagesA/help')
}
const navFeedBack = () => {
  state.showPopup = false
  tnNavPage('/pagesA/feedback')
}
const navCirclesPostDetailPage = (circlesPostId: number) => {
  tnNavPage(`/circlesPostPages/detail?circlesPostId=${circlesPostId}`)
}
const navVideoLists = (circlesPostId: number) => {
  tnNavPage(`/circlesPostPages/video?circlesPostId=${circlesPostId}`)
}
const changeTab = (index: number) => {
  state.currentTabIndex = index
  state.circlesPostLists = []
  if (state.currentTabIndex == 3) {
    state.scope = 'own_see'
  } else {
    state.scope = 'all_see,fans_see'
  }
  paging.value.reload(true)
}

const queryList = (pageNo: number, pageSize: number) => {
  const userInfo = uni.getStorageSync(USER_INFO)
  if (userInfo) {
    state.userInfo = userInfo
  }
  if (state.currentTabIndex == 0) {
    user
      .userAttachment({
        page: pageNo,
        page_size: 20,
      })
      .then((res) => {
        if (res.code == 1 && res.data.length > 0) {
          const photoAlbum = res.data.map((item) => {
            return `${FILE_URL}${item.url}`
          })
          paging.value.complete(photoAlbum)
        }
      })
      .catch((err: any) => {
        paging.value.complete(false)
      })
  } else if (state.currentTabIndex == 2) {
    circlesPost
      .likeCirclesPostLists({
        page: pageNo,
        page_size: pageSize,
      })
      .then((res) => {
        res.data.forEach((dynamic) => {
          if (dynamic.circlesPost.attachment_type == 'image') {
            if (Array.isArray(dynamic.circlesPost.attachment)) {
              // 遍历 attachment 数组
              dynamic.circlesPost.attachment =
                dynamic.circlesPost.attachment.map((attachment) => {
                  return `${FILE_URL}${attachment}`
                })
            }
          }
        })
        paging.value.complete(res.data)
      })
      .catch((err) => {
        paging.value.complete(false)
      })
  } else {
    circlesPost
      .mineCirclesPostLists({
        page: pageNo,
        page_size: pageSize,
        scope: state.scope,
      })
      .then((res) => {
        res.data.forEach((dynamic) => {
          if (dynamic.attachment_type == 'image') {
            if (Array.isArray(dynamic.attachment)) {
              // 遍历 attachment 数组
              dynamic.attachment = dynamic.attachment.map((attachment) => {
                return `${FILE_URL}${attachment}`
              })
            }
          }
        })
        paging.value.complete(res.data)
      })
      .catch((err) => {
        paging.value.complete(false)
      })
  }
}
const getUserInfo = () => {
  user
    .userInfo({})
    .then((res) => {
      if (res.code == 1) {
        state.userInfo = res.data
        uni.setStorageSync(USER_INFO, res.data)
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

onMounted(() => {
  initTransparentScroll()
})

onShow(() => {
  console.log('onShow')
  if (state.userToken != '') {
    getUserInfo()
  }
})

// 顶部导航栏初始化完成事件
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  updateTargetTriggerValue(info.height)
}
const navCirclesDetailPage = (circlesId: number) => {
  tnNavPage(`/circlesPages/detail?circlesId=${circlesId}`)
}
const onLoad: IndexPageOnLoadFunc = () => {
  // eslint-disable-next-line no-console
  console.log('mine onLoad')
  state.userToken = uni.getStorageSync(USER_TOKEN)
  if (state.userToken) {
    getUserInfo()
  }
  state.systemConfig = uni.getStorageSync(SYSTEM_CONFIG)
  state.userAgreement = state.systemConfig.agreement.user_agreement
  state.privacyPolicy = state.systemConfig.agreement.privacy_policy
  state.communityCovenants = state.systemConfig.agreement.community_covenants

  if (state.userInfo.personal_bg == '') {
    state.userInfo.avatar = state.systemConfig.basic.default_user_avatar
    state.userInfo.personal_bg = state.systemConfig.basic.default_user_bg
  }
}
const onScroll: IndexPageOnScrollFunc = ({ top }) => {
  console.log('mine onScroll')
  opacityScrollHandle(top)
  paging.value.updatePageScrollTop(top)
}
useSubPageProvide(3, {
  onLoad,
  onScroll,
})
</script>

// #ifdef MP-WEIXIN
<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true,
  },
}
</script>
// #endif

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :placeholder="false"
      back-icon=""
      back-text=""
      home-icon=""
      :bottom-shadow="false"
      :bg-color="`rgba(255, 255, 255, ${navbarOpacity})`"
      @init-finish="navbarInitFinishHandle"
    >
      <view class="navbar">
        <TnButton
          icon="align"
          shape="circle"
          :bold="true"
          :custom-style="{
            backgroundColor: `rgba(248, 247, 248, ${Math.max(
              0.75,
              navbarOpacity
            )})`,
            color: '#000000',
          }"
          @click="clickLeftMenu"
        />
        <view
          class="box"
          :style="{
            color: `rgba(0, 0, 0 , ${navbarOpacity})`,
          }"
        >
          <view class="box__tips tn-text-ellipsis-1 tn-text-center">
            {{ state.userInfo.nickname || '' }}
          </view>
        </view>
      </view>
    </TnNavbar>
    <!-- 页面内容 -->
    <view class="page" :style="{ paddingTop: `${navBarInfo.height + 12}px` }">
      <!-- 顶部背景 -->
      <view
        class="top-bg"
        :style="
          'background: url(' +
          FILE_URL +
          state.userInfo.personal_bg +
          '); background-repeat: no-repeat;background-size: cover;background-position: center center;'
        "
      />
      <!-- 用户信息 -->
      <view class="user-info">
        <view class="info-content">
          <view class="avatar">
            <TnAvatar
              v-if="state.userInfo.is_vip == 1"
              :url="FILE_URL + state.userInfo.avatar"
              :shadow="true"
              img-mode="aspectFill"
              size="130"
              badge="icon-vip-diamond-fill"
              :badge-config="{
                absoluteCenter: false,
                absolutePosition: {
                  top: '95rpx',
                },
                size: '40rpx',
                fontSize: '30rpx',
                bgColor: '#ffca28',
              }"
            />
            <TnAvatar
              v-else
              :url="FILE_URL + state.userInfo.avatar"
              :border="true"
              :shadow="true"
              img-mode="aspectFill"
              size="130"
            />
          </view>
          <view class="content">
            <view class="nickname">
              <text
                v-if="state.userInfo?.nickname == ''"
                @tap.stop="tnNavPage('/pages/login/login')"
                >请登录</text
              >
              <text v-else>{{ state.userInfo?.nickname }}</text>
              <image
                v-if="state.userInfo.grade_icon != ''"
                :src="FILE_URL + state.userInfo.grade_icon"
                class="user-level-img"
              />
            </view>
            <view class="uid">
              <view class="text">ID号: {{ state.userInfo?.id_number }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="other-user-info">
        <!-- 点赞、粉丝、关注、圈子数量 -->
        <view class="statistics-container">
          <view class="statistics-item">
            <view class="total">
              {{ state.userInfo.dynamic_total || 0 }}
            </view>
            <view class="title">动态</view>
          </view>
          <view class="statistics-item" @click="navMineFans">
            <view class="total">
              {{ state.userInfo.fans_total || 0 }}
            </view>
            <view class="title">粉丝</view>
          </view>
          <view class="statistics-item" @click="navMineFollow">
            <view class="total">
              {{ state.userInfo.follow_total || 0 }}
            </view>
            <view class="title">关注</view>
          </view>
          <view class="statistics-item" @click="navMineVisitor">
            <view class="total">
              {{ state.userInfo.visitor_total || 0 }}
            </view>
            <view class="title">访客</view>
          </view>
          <view class="statistics-item">
            <view class="edit-info">
              <TnButton
                bg-color="tn-gray-disabled"
                :custom-style="{
                  borderRadius: '15rpx 15rpx 0rpx 15rpx',
                  padding: '16rpx 34rpx',
                  color: '#000',
                  fontWeight: 500,
                }"
                @click="navEditUserInfo"
              >
                编辑资料
              </TnButton>
            </view>
          </view>
        </view>

        <!-- 用户签名/介绍 -->
        <view class="motto tn-mt-sm">
          {{ state.userInfo.introduce || '这家伙很懒，什么都没有写～' }}
        </view>
        <view class="motto tn-mt-sm">
          注册于 {{ state.userInfo.register_date || '-' }}
        </view>
        <!-- 用户标签 -->
        <view class="user-tags tn-mt-sm">
          <TnTag
            v-for="(item, index) in state.userInfo.labels"
            :key="index"
            shape="round"
            bg-color="tn-gradient-bg__grey-light"
            text-color="#838383"
            :custom-style="{
              padding: '8rpx 14rpx',
              marginBottom: '15rpx',
              fontSize: '25rpx',
              marginRight: '10rpx',
            }"
          >
            {{ item }}
          </TnTag>
          <TnTag
            v-if="state.userInfo.labels && state.userInfo.labels.length < 5"
            shape="round"
            bg-color="tn-gradient-bg__grey-light"
            text-color="#838383"
            :custom-style="{
              padding: '8rpx 14rpx',
              marginBottom: '15rpx',
              fontSize: '25rpx',
              marginRight: '10rpx',
            }"
            @click="navAddTag"
          >
            <TnIcon name="add" />添加标签
          </TnTag>
        </view>
        <view class="motto tn-mt-xs">
          <TnTag
            bg-color="tn-gradient-bg__grey-light"
            text-color="#838383"
            :custom-style="{
              borderRadius: '8rpx',
              padding: '8rpx 14rpx',
              marginBottom: '15rpx',
              marginRight: '15rpx',
              fontSize: '25rpx',
            }"
          >
            <TnIcon
              v-if="state.userInfo.gender == 1"
              name="sex-male"
              color="tn-aquablue"
            />
            <TnIcon
              v-else-if="state.userInfo.gender == 2"
              name="sex-female"
              color="tn-red"
            />
            <TnIcon v-else name="sex" color="tn-red" />
            <text>{{ state.userInfo.gender_text || '未知' }}</text>
          </TnTag>
          <TnTag
            v-if="state.userInfo.age > 0"
            bg-color="tn-gradient-bg__grey-light"
            text-color="#838383"
            :custom-style="{
              borderRadius: '8rpx',
              padding: '8rpx 14rpx',
              marginBottom: '15rpx',
              marginRight: '15rpx',
              fontSize: '25rpx',
            }"
          >
            <text> {{ state.userInfo.age }}岁 </text>
          </TnTag>
          <TnTag
            bg-color="tn-gradient-bg__grey-light"
            text-color="#838383"
            :custom-style="{
              borderRadius: '8rpx',
              padding: '8rpx 14rpx',
              marginBottom: '15rpx',
              fontSize: '25rpx',
            }"
          >
            IP属地：{{ state.userInfo.ip_territory || '-' }}
          </TnTag>
        </view>
      </view>
      <TnSticky :id="triggerElementId" :offset-top="navBarInfo.height">
        <TnTabs
          v-model="state.currentTabIndex"
          :scroll="false"
          color="#7d7d7d"
          active-color="#080808"
          :bottom-shadow="false"
          bg-color="#fff"
          font-size="32rpx"
          bar-width="80rpx"
        >
          <TnTabsItem
            v-for="(item, index) in state.tabsData"
            :key="index"
            :title="item"
            @click="changeTab(index)"
          />
        </TnTabs>
      </TnSticky>
      <view class="tn-gray-disabled_border tn-border-bottom" />
      <!-- 列表 -->
      <view class="list">
        <z-paging
          ref="paging"
          v-model="state.circlesPostLists"
          use-page-scroll
          @query="queryList"
        >
          <template #refresher="{ refresherStatus }">
            <CustomRefresher :status="refresherStatus" />
          </template>
          <view class="switch-tab-container">
            <view
              v-if="state.currentTabIndex === 0"
              class="switch-tab-content mine-photos"
            >
              <TnPhotoAlbum
                :data="state.circlesPostLists"
                :column="4"
                :max="600"
              />
            </view>

            <view
              v-else-if="state.currentTabIndex == 2"
              class="switch-tab-content"
            >
              <view
                v-for="(item, index) in state.circlesPostLists"
                :key="index"
              >
                <view class="graphic-card">
                  <!-- 简要信息 -->
                  <view class="brief-info">
                    <view class="brief-info__content">
                      <view class="brief-info__avatar">
                        <TnAvatar
                          v-if="item.circlesPost.user.is_vip == 1"
                          :url="FILE_URL + item.circlesPost.user.avatar"
                          :border="true"
                          :shadow="true"
                          img-mode="aspectFill"
                          size="lg"
                          badge="icon-vip-diamond-fill"
                          :badge-config="{
                            absoluteCenter: false,
                            absolutePosition: {
                              top: '60rpx',
                              right: '-10rpx',
                            },
                            fontSize: '35',
                            textColor: '#FFB800',
                            bgColor: '#FFFFFF',
                            size: '40',
                          }"
                        />
                        <TnAvatar
                          v-else
                          :url="FILE_URL + item.circlesPost.user.avatar"
                          :border="true"
                          :shadow="true"
                          img-mode="aspectFill"
                          size="lg"
                        />
                      </view>
                      <view class="brief-info__data">
                        <view class="title tn-text-ellipsis-1">
                          {{ item.circlesPost.user.nickname }}
                          <image
                            v-if="item.circlesPost.user.grade_icon != ''"
                            :src="FILE_URL + item.circlesPost.user.grade_icon"
                            class="user-level-img"
                          />
                        </view>
                        <view class="desc tn-text-ellipsis-1">
                          {{ item.circlesPost.update_date }}
                        </view>
                      </view>
                    </view>
                    <view class="brief-info__operation">
                      <slot name="briefOperation">
                        <view class="brief-info__operation">
                          <!-- <TnIcon name="group-square" /> -->
                        </view>
                      </slot>
                    </view>
                  </view>
                  <!-- 内容容器 -->
                  <view class="container">
                    <!-- 内容 -->
                    <view class="content tn-text-ellipsis-5">
                      <!-- 标签和内容 -->
                      <view class="content__tags">
                        <view
                          v-for="(tagItem, tagIndex) in item.circlesPost.topics_name"
                          :key="tagIndex"
                          class="tag-item"
                        >
                          <text @click="navTopicDetailPage(tagItem)">
                            #{{ tagItem }}
                          </text>
                        </view>
                      </view>
                      <view
                        class="content__data"
                        @tap.stop="
                          navCirclesPostDetailPage(item.circles_post_id)
                        "
                      >
                        <text>{{ item.circlesPost.content }}</text>
                      </view>
                    </view>
                    <!-- 图片列表 -->
                    <view
                      v-if="item.circlesPost.attachment_type == 'image'"
                      class="images"
                      @tap.stop="navCirclesPostDetailPage(item.circles_post_id)"
                    >
                      <!-- 一张图片 -->
                      <view
                        v-if="item.circlesPost.attachment.length === 1"
                        class="images-one"
                      >
                        <TnLazyLoad :src="item.circlesPost.attachment[0]" />
                      </view>
                      <!-- 两张图片 -->
                      <view
                        v-if="item.circlesPost.attachment.length === 2"
                        class="images-two"
                      >
                        <TnPhotoAlbum
                          :data="item.circlesPost.attachment"
                          :column="2"
                        />
                      </view>
                      <!-- 三张图片 -->
                      <view
                        v-if="item.circlesPost.attachment.length === 3"
                        class="images-three"
                      >
                        <view class="image-wrapper-left">
                          <view class="image-container">
                            <TnLazyLoad :src="item.circlesPost.attachment[0]" />
                          </view>
                        </view>
                        <view class="image-wrapper-right">
                          <view class="image-container">
                            <TnLazyLoad :src="item.circlesPost.attachment[1]" />
                          </view>
                          <view class="image-container">
                            <TnLazyLoad :src="item.circlesPost.attachment[2]" />
                          </view>
                        </view>
                      </view>
                      <!-- 四张图片 -->
                      <view
                        v-if="item.circlesPost.attachment.length === 4"
                        class="images-four"
                      >
                        <TnPhotoAlbum
                          :data="item.circlesPost.attachment"
                          :column="2"
                        />
                      </view>
                      <TnPhotoAlbum
                        v-if="item.circlesPost.attachment.length >= 5"
                        :data="item.circlesPost.attachment"
                      />
                    </view>

                    <!-- 视频 -->
                    <view
                      v-if="item.circlesPost.attachment_type == 'video'"
                      class="content-video"
                      @click="navVideoLists(item.circlesPost.id)"
                    >
                      <view class="video-icon">
                        <TnIcon name="video-fill" size="100" color="#FFFFFF" />
                      </view>
                      <video
                        class="video-data"
                        :src="FILE_URL + item.circlesPost.attachment"
                        :muted="true"
                        object-fit="cover"
                        :enable-progress-gesture="false"
                        :show-loading="false"
                        :show-play-btn="false"
                        :show-center-play-btn="false"
                        :show-fullscreen-btn="false"
                        :controls="false"
                        :autoplay="false"
                        :enable-play-gesture="false"
                        :loop="true"
                      />
                    </view>

                    <!-- 语音 -->
                    <view
                      v-if="item.circlesPost.attachment_type == 'voice'"
                      class="audio"
                    >
                      <luch-audio
                        :play.sync="true"
                        :name="state.userInfo.nickname"
                        author="录制"
                        :poster="FILE_URL + state.userInfo.avatar"
                        :src="FILE_URL + item.circlesPost.attachment"
                        :autoplay="false"
                      />
                    </view>
                  </view>

                  <!-- 链接 -->
                  <view
                    v-if="item.circlesPost.attachment_type == 'link'"
                    class="link"
                  >
                    <uni-link
                      :href="item.circlesPost.attachment"
                      :text="item.circlesPost.attachment"
                      color="#007BFF"
                      copy-tips="链接已复制"
                      font-size="18"
                    />
                  </view>

                  <!-- 底部信息 -->
                  <view
                    v-if="item.circlesPost.location !== ''"
                    class="location-info"
                  >
                    <TnButton
                      plain
                      border-color="tn-grey-disabled"
                      custom-class="custom-button-class"
                      @click="
                        jumpMap(
                          item.circlesPost.longitude,
                          item.circlesPost.latitude,
                          item.circlesPost.location,
                          item.circlesPost.poiaddress
                        )
                      "
                    >
                      <TnIcon name="location-fill" color="tn-blue" />
                      <view class="location-name">{{
                        item.circlesPost.location
                      }}</view>
                    </TnButton>
                  </view>
                  <view class="bottom-info">
                    <view class="bottom-info__left">
                      <view class="tag-circles">
                        <view class="tn-flex-center-center">
                          <view class="circles-pic">
                            <view
                              class="circles-image"
                              :style="
                                'background-image: url(' +
                                FILE_URL +
                                item.circlesPost.circles.image +
                                ')'
                              "
                            />
                          </view>
                          <view
                            class="circles-name tn-text-ellipsis-1"
                            @tap.stop="
                              navCirclesDetailPage(item.circlesPost.circles.id)
                            "
                          >
                            {{ item.circlesPost.circles.name }}
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="bottom-info__right">
                      <!-- 底部右侧数据 -->
                      <view class="count-item-data">
                        <TnIcon name="eye" />
                        <view class="count">{{
                          item.circlesPost.view_total
                        }}</view>
                      </view>
                      <view class="count-item-data">
                        <TnIcon name="message" />
                        <view class="count">
                          {{ item.circlesPost.comment_total }}
                        </view>
                      </view>
                      <view
                        v-if="item.circlesPost.plate == 'dynamic'"
                        class="count-item-data"
                      >
                        <TnIcon name="like" />
                        <view class="count">{{
                          item.circlesPost.like_total
                        }}</view>
                      </view>
                    </view>
                  </view>
                </view>
                <view
                  style="border-bottom: 20rpx solid var(--tn-color-gray-light)"
                />
              </view>
            </view>

            <view v-else class="switch-tab-content">
              <view
                v-for="(item, index) in state.circlesPostLists"
                :key="index"
              >
                <view class="graphic-card">
                  <!-- 简要信息 -->
                  <view class="brief-info">
                    <view class="brief-info__content">
                      <view class="brief-info__avatar">
                        <TnAvatar
                          v-if="item.user.is_vip == 1"
                          :url="FILE_URL + item.user.avatar"
                          :border="true"
                          :shadow="true"
                          img-mode="aspectFill"
                          size="lg"
                          badge="icon-vip-diamond-fill"
                          :badge-config="{
                            absoluteCenter: false,
                            absolutePosition: {
                              top: '60rpx',
                              right: '-10rpx',
                            },
                            fontSize: '35',
                            textColor: '#FFB800',
                            bgColor: '#FFFFFF',
                            size: '40',
                          }"
                        />
                        <TnAvatar
                          v-else
                          :url="FILE_URL + item.user.avatar"
                          :border="true"
                          :shadow="true"
                          img-mode="aspectFill"
                          size="lg"
                        />
                      </view>
                      <view class="brief-info__data">
                        <view class="title tn-text-ellipsis-1">
                          {{ item.user.nickname }}
                          <image
                            v-if="item.user.grade_icon != ''"
                            :src="FILE_URL + item.user.grade_icon"
                            class="user-level-img"
                          />
                        </view>
                        <view class="desc tn-text-ellipsis-1">
                          {{ item.update_date }}
                        </view>
                      </view>
                    </view>
                    <view class="brief-info__operation">
                      <slot name="briefOperation">
                        <view
                          class="brief-info__operation"
                          style="color: #ff444f"
                        >
                          <text v-if="item.status == '0'">审核中</text>
                          <text v-if="item.status == '20'">已违规</text>
                          <text v-if="item.status == '30'">已下架</text>
                          <text v-else />
                        </view>
                      </slot>
                    </view>
                  </view>
                  <!-- 内容容器 -->
                  <view class="container">
                    <!-- 内容 -->
                    <view class="content tn-text-ellipsis-5">
                      <!-- 标签和内容 -->
                      <view class="content__tags">
                        <view
                          v-for="(tagItem, tagIndex) in item.topics_name"
                          :key="tagIndex"
                          class="tag-item"
                        >
                          <text @click="navTopicDetailPage(tagItem)">
                            #{{ tagItem }}
                          </text>
                        </view>
                      </view>
                      <view
                        class="content__data"
                        @tap.stop="navCirclesPostDetailPage(item.id)"
                      >
                        <text>{{ item.content }}</text>
                      </view>
                    </view>
                    <!-- 图片列表 -->
                    <view
                      v-if="item.attachment_type == 'image'"
                      class="images"
                      @tap.stop="navCirclesPostDetailPage(item.id)"
                    >
                      <!-- 一张图片 -->
                      <view
                        v-if="item.attachment.length === 1"
                        class="images-one"
                      >
                        <TnLazyLoad :src="item.attachment[0]" />
                      </view>
                      <!-- 两张图片 -->
                      <view
                        v-if="item.attachment.length === 2"
                        class="images-two"
                      >
                        <TnPhotoAlbum :data="item.attachment" :column="2" />
                      </view>
                      <!-- 三张图片 -->
                      <view
                        v-if="item.attachment.length === 3"
                        class="images-three"
                      >
                        <view class="image-wrapper-left">
                          <view class="image-container">
                            <TnLazyLoad :src="item.attachment[0]" />
                          </view>
                        </view>
                        <view class="image-wrapper-right">
                          <view class="image-container">
                            <TnLazyLoad :src="item.attachment[1]" />
                          </view>
                          <view class="image-container">
                            <TnLazyLoad :src="item.attachment[2]" />
                          </view>
                        </view>
                      </view>
                      <!-- 四张图片 -->
                      <view
                        v-if="item.attachment.length === 4"
                        class="images-four"
                      >
                        <TnPhotoAlbum :data="item.attachment" :column="2" />
                      </view>
                      <TnPhotoAlbum
                        v-if="item.attachment.length >= 5"
                        :data="item.attachment"
                      />
                    </view>

                    <!-- 视频 -->
                    <view
                      v-if="item.attachment_type == 'video'"
                      class="content-video"
                      @click="navVideoLists(item.id)"
                    >
                      <view class="video-icon">
                        <TnIcon name="video-fill" size="100" color="#FFFFFF" />
                      </view>
                      <video
                        class="video-data"
                        :src="FILE_URL + item.attachment"
                        :muted="true"
                        object-fit="cover"
                        :enable-progress-gesture="false"
                        :show-loading="false"
                        :show-play-btn="false"
                        :show-center-play-btn="false"
                        :show-fullscreen-btn="false"
                        :controls="false"
                        :autoplay="false"
                        :enable-play-gesture="false"
                        :loop="true"
                      />
                    </view>

                    <!-- 语音 -->
                    <view v-if="item.attachment_type == 'voice'" class="audio">
                      <luch-audio
                        :play.sync="true"
                        :name="item.user.nickname"
                        author="录制"
                        :poster="FILE_URL + item.user.avatar"
                        :src="FILE_URL + item.attachment"
                        :autoplay="false"
                      />
                    </view>
                  </view>

                  <!-- 链接 -->
                  <view v-if="item.attachment_type == 'link'" class="link">
                    <uni-link
                      :href="item.attachment"
                      :text="item.attachment"
                      color="#007BFF"
                      copy-tips="链接已复制"
                      font-size="18"
                    />
                  </view>

                  <!-- 底部信息 -->
                  <view v-if="item.location !== ''" class="location-info">
                    <TnButton
                      plain
                      border-color="tn-grey-disabled"
                      custom-class="custom-button-class"
                      @click="
                        jumpMap(
                          item.longitude,
                          item.latitude,
                          item.location,
                          item.poiaddress
                        )
                      "
                    >
                      <TnIcon name="location-fill" color="tn-blue" />
                      <view class="location-name">{{ item.location }}</view>
                    </TnButton>
                  </view>
                  <view class="bottom-info">
                    <view class="bottom-info__left">
                      <view class="tag-circles">
                        <view class="tn-flex-center-center">
                          <view class="circles-pic">
                            <view
                              class="circles-image"
                              :style="
                                'background-image: url(' +
                                FILE_URL +
                                item.circles.image +
                                ')'
                              "
                            />
                          </view>
                          <view
                            class="circles-name tn-text-ellipsis-1"
                            @tap.stop="navCirclesDetailPage(item.circles.id)"
                          >
                            {{ item.circles.name }}
                          </view>
                        </view>
                      </view>
                    </view>
                    <view class="bottom-info__right">
                      <!-- 底部右侧数据 -->
                      <view class="count-item-data">
                        <TnIcon name="eye" />
                        <view class="count">{{ item.view_total }}</view>
                      </view>
                      <view class="count-item-data">
                        <TnIcon name="message" />
                        <view class="count"> {{ item.comment_total }} </view>
                      </view>
                      <view
                        v-if="item.plate == 'dynamic'"
                        class="count-item-data"
                      >
                        <TnIcon name="like" />
                        <view class="count">{{ item.like_total }}</view>
                      </view>
                    </view>
                  </view>
                </view>
                <view
                  style="border-bottom: 20rpx solid var(--tn-color-gray-light)"
                />
              </view>
            </view>
          </view>
        </z-paging>
      </view>
    </view>
  </PageContainer>
  <TnPopup
    v-model="state.showPopup"
    open-direction="left"
    :z-index="21075"
    width="60%"
  >
    <view class="menu-container">
      <view class="menu-content">
        <view class="tn-p-lg" />
        <view class="tn-p">
          <!-- 会员等级、权益 -->
          <view
            class="button-vip tn-flex justify-between items-center"
            @click="navVip"
          >
            <view
              class="tn-flex tn-flex-row items-center"
              style="height: 130rpx"
            >
              <view class="tn-ml-sm">
                <TnIcon name="vip-text" color="#facd8c" size="120rpx" />
              </view>
              <view class="tn-text-xs" style="color: #facd8c">
                <view class="tn-text-center tn-mb-xs">会员福利</view>
                <view class="">助力事业一骑绝尘</view>
              </view>
            </view>
          </view>
        </view>
        <view class="tn-p tn-flex items-center" @click="navSignin">
          <TnIcon name="calendar" size="35" />
          <text class="tn-ml-xs">每日签到</text>
        </view>
        <view class="tn-p tn-flex items-center" @click="navMineReply">
          <TnIcon name="comment" size="35" />
          <text class="tn-ml-xs">我的评论</text>
        </view>
        <view class="tn-p tn-flex items-center" @click="navMineOrganizeBureau">
          <TnIcon name="team" size="35" />
          <text class="tn-ml-xs">我的组局</text>
        </view>
        <view class="tn-p tn-flex items-center" @click="navMineCircles">
          <TnIcon name="group-circle" size="35" />
          <text class="tn-ml-xs">我的圈子</text>
        </view>
        <view
          class="tn-p tn-flex items-center"
          @click="navMineCirclesFootprint"
        >
          <TnIcon name="footprint" size="35" />
          <text class="tn-ml-xs">圈子足迹</text>
        </view>
        <view class="tn-p tn-flex items-center" @click="navMineFans">
          <TnIcon name="my-love" size="35" />
          <text class="tn-ml-xs">我的粉丝</text>
        </view>
        <view class="tn-p tn-flex items-center" @click="navMineFollow">
          <TnIcon name="my-add" size="35" />
          <text class="tn-ml-xs">我的关注</text>
        </view>
        <view
          class="tn-gray-disabled_border tn-border-bottom tn-mr tn-ml tn-mt-sm tn-mb-sm"
        />
        <view class="tn-p tn-flex items-center" @click="navAboutUs">
          <TnIcon name="identity" size="35" />
          <text class="tn-ml-xs">关于我们</text>
        </view>
        /* #ifdef MP-WEIXIN */
        <view class="tn-p tn-flex items-center">
          <TnButton only-button open-type="contact">
            <TnIcon name="service-simple" size="35" />
            <text class="tn-ml-xs">合作勾搭</text>
          </TnButton>
        </view>
        /* #endif */
        <view
          class="tn-gray-disabled_border tn-border-bottom tn-mr tn-ml tn-mt-sm tn-mb-sm"
        />
        <view class="tn-p tn-flex items-center" @click="navCommunityCovenants">
          <TnIcon name="flower" size="35" />
          <text class="tn-ml-xs">社区公约</text>
        </view>
      </view>
    </view>
    <view class="menu-footer">
      <view class="footer-item" @click="navSet">
        <view class="icon">
          <TnButton
            shape="circle"
            icon="install"
            width="80"
            font-size="50"
            bg-color="#ebebeb"
          />
        </view>
        <view class="title">设置</view>
      </view>
      <view class="footer-item" @click="navHelp">
        <view class="icon">
          <TnButton
            shape="circle"
            icon="help"
            width="80"
            font-size="50"
            bg-color="#ebebeb"
          />
        </view>
        <view class="title">常见问题</view>
      </view>
      <view class="footer-item" @click="navFeedBack">
        <view class="icon">
          <TnButton
            shape="circle"
            icon="tip"
            width="80"
            font-size="50"
            bg-color="#ebebeb"
          />
        </view>
        <view class="title">建议反馈</view>
      </view>
    </view>
    <view class="footer-copyright">
      <TnFooter
        content="Copyright © 2023 智小满"
        fixed-mode="page"
        size="22"
        offset-bottom="20rpx"
      />
    </view>
  </TnPopup>
</template>

<style lang="scss" scoped>
@use '@/static/css/mine.scss';
@use '@/static/css/graphic-card.scss';
</style>
